<script setup>
import { ref, onMounted } from 'vue'
import { ArrowUpBold } from '@element-plus/icons-vue'
const isLogined = ref(false)
const userName = ref('')
onMounted(() => {
  console.log(sessionStorage.getItem('loginUser'))
  if (sessionStorage.getItem('loginUser') != null && sessionStorage.getItem('loginUser') != '') {
    isLogined.value = true
    userName.value = sessionStorage.getItem('loginUser')
  } else {
    isLogined.value = false
  }
})
</script>

<template>
  <!-- 导航条 B -->
  <div class="nav">
    <div class="logo">
      <img
        src="https://www.pohome.cn/image/logo.png"
        alt=""
      >
    </div>
    <div
      class="login"
      v-if="!isLogined"
    >
      <div class="btn">
        <RouterLink to="/login">登录
        </RouterLink>
      </div>
      <b>|</b>
      <div
        class="btn"
        v-if="!isLogined"
      >
        <RouterLink to="/login">注册
        </RouterLink>
      </div>
    </div>
    <div
      class="login-b"
      v-if="isLogined"
    >
      <div class="btn">
        <div class="img">
          <img
            src="https://www.pohome.cn/image/user-default-avatar-small.png"
            alt=""
          >
        </div>
        <div class="name">{{userName}}</div>
      </div>
      <b>|</b>
      <div class="btn">退出</div>
    </div>
  </div>
  <div class="nav-b">
    <ul>
      <li>
        <RouterLink to="/">HOME <div>首页</div>
        </RouterLink>
      </li>
      <li>
        <RouterLink to="/about">ABOUT <div>关于我们</div>
        </RouterLink>
      </li>
      <li>
        <RouterLink to="/adopt">DOGS&CATS <div>喵&汪 星人</div>
        </RouterLink>
      </li>
      <li>
        <RouterLink to="/news">NEWS <div>新闻</div>
        </RouterLink>
      </li>
      <li>
        <a
          target="_blank"
          href="https://gitee.com/zwz031228/pet-orphans-home-.git"
        >WAREHOUSE <div>仓库</div>
        </a>
      </li>
      <li>
        <RouterLink to="/shop">SHOP <div>公益集市</div>
        </RouterLink>
      </li>
    </ul>
  </div>

  <RouterView />
  <!-- 导航条 E -->

  <!-- 底部 B -->
  <div class="bottom">
    <p>Copyright © 2007 - 2024 北京梓木科技有限责任公司公司版权所有 </p>
    <p> 京ICP备16060674号-4</p>
  </div>
  <!-- 底部 E -->
  <!-- 返回顶部 B -->
  <el-backtop :bottom="100">
    <div style="
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: var(--myc);
      ">
      <el-icon>
        <ArrowUpBold />
      </el-icon>
    </div>
  </el-backtop>
  <!-- 返回顶部 E -->
</template>

<style scoped>
/* 导航条 B */
.nav {
  position: absolute;
  padding: 5px 15%;
  width: 100%;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #00000038;
}
.nav .logo {
  width: 20%;
}
.nav .logo img {
  width: 100%;
}
.nav .login .btn,
.nav .login .btn a,
.nav .login b,
.nav .login-b .btn,
.nav .login-b .btn a,
.nav .login-b b {
  float: left;
  padding: 0 5px;
  color: #fff;
}
.nav .login .btn a:hover,
.nav .login-b .btn a:hover {
  cursor: pointer;
  color: var(--myc);
}
.nav .login-b {
  display: flex;
  align-items: center;
}
.nav .login-b .btn:nth-child(1) {
  display: flex;
  align-items: center;
}
.nav .login-b .img {
  width: 35px;
  margin-right: 10px;
}

.nav .login-b img {
  border-radius: 100%;
  width: 100%;
}

.nav-b {
  position: absolute;
  top: 78px;
  padding: 0 15%;
  width: 100%;
}

.nav-b ul {
  width: 100%;
  border-bottom: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-b li {
  padding: 10px;
  padding-top: 50px;
  width: 20%;
}
.nav-b li a {
  color: #fff;
}
.nav-b li:hover {
  background-color: var(--myct);
}
@media (max-width: 1200px) {
  .nav {
    padding: 5px 0;
  }
  .nav-b {
    padding: 0 10px;
  }
}
@media (max-width: 480px) {
  .nav {
    padding: 0;
    height: 40px;
  }
  .nav-b {
    top: 40px;
    padding: 0;
  }
  .nav-b ul li {
    padding-top: 20px;
  }
  .nav-b ul li a,
  .nav-b ul li a div {
    font-size: 0.6rem;
  }
}
/* 导航条 E */

/* 底部 B */
.bottom {
  padding: 30px 0;
  width: 100%;
  text-align: center;
  background-color: #302d2d;
  color: #fff;
}
/* 底部 E */

.el-icon {
  color: var(--myc);
}
</style>
